<template>
  <div id="roleManagement">
    <template v-if="isSelect">
      <div class="div" v-for="role in roles" :key="role.id" >
        <i class="iconfont icon-tianjia delete " @click="deleteOneRole(role)"/>
        <div style="text-align:center" @click="showRole(role)">
          <i class="iconfont" :class="role.icon" style="font-size: 50px;"></i>
          <h3>{{ role.name }}</h3>
        </div>
      </div>
      <div class="div">
        <div style="text-align:center" @click="addRole()">
          <i class="iconfont icon-tianjia" style="font-size: 50px;"></i>
          <h3>新增</h3>
        </div>
      </div>
    </template>
    <template v-else>
      <router-view />
    </template>
  </div>
</template>

<script>
import {
  getAllRole,deleteRole
} from '@/assets/request/api.js';

export default {
  name: 'roleManagement',
  data() {
    return {
      roles: [],
      isSelect: true
    }
  },
  methods: {
    async getAllRole() {
      await getAllRole().then(res => {
        this.roles = res.data.records
      }).catch(err => {
        this.$message({
          message: '角色获取失败',
          type: 'error'
        });
      })
    },
    showRole(role) {
      this.isSelect = false
      this.$router.push({name: 'roleManagementUpdateRole', params: role})
    },
    addRole() {
      this.isSelect = false
      this.$router.push({name: 'roleManagementAddRole'})
    },
    deleteOneRole(role) {

      this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        
        deleteRole(role.id).then(res => {

          this.$message({
            type: 'success',
            message: '删除成功'
          });

          this.getAllRole()

        }).catch(err => {

          this.$message({
            message: err.message,
            type: 'error'
          });

        })


      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    }
  },
  created() {
    this.getAllRole()
  },
  watch: {
    $route(to,from) {
      if(to.path === '/authority/roleManagement') { 
        this.isSelect = true
        this.getAllRole()
      }
    }
  },
    
}
</script>

<style scoped lang="scss">


.div {
  // position: absolute;
  width: 200px;
  padding: 30px;
  margin: 20px;
  display: inline-block;
  box-sizing: border-box;
  position:relative;
  color: #515a6e;
  border:1px solid rgb(232, 234, 236);
}

.div:hover {
  box-shadow: 0px 0px 5px #888888;
  cursor: pointer;
}

.delete {
  background-color: white;
  font-size: 20px;
  text-align: center;
  border-radius: 100%;
  transform: rotate(45deg); 
  display: block; //块元素:设置宽和高，inline元素设置宽高无效
  right: 10px;
  top: 10px;
  position: absolute; //绝对定位，关联父元素的relative
}

.delete:hover {
  box-shadow: 0px 0px 5px #888888;
  cursor: pointer;
}



 
</style>
